<template>
  <n-layout>
    <n-layout has-sider>
      <n-layout-sider
        bordered
        collapse-mode="width"
        :collapsed-width="64"
        :width="240"
        :collapsed="collapsed"
        show-trigger
        @collapse="changeCollapsed(true)"
        @expand="changeCollapsed(false)"
      >
        <a href="/" class="logo">
          <img
            src="https://gd-hbimg.huaban.com/7c1fc4152bf683242cd95f4423165cf8755b8521146140-EVVUYw_fw1200webp"
            alt=""
            :width="!collapsed ? 120 : 80"
          />
          <img
            v-if="!collapsed"
            src="https://gd-hbimg.huaban.com/f69930849c2dece2f2e652b8f784d723b6bcadb3acc6-6PkhS6_fw480webp"
            alt=""
            height="55"
            style="margin-right: 28px"
          />
        </a>
        <n-menu
          @update:value="onMenuChange"
          :collapsed="collapsed"
          :collapsed-width="64"
          :collapsed-icon-size="22"
          v-model:value="menuKey"
          :options="menuOptions"
        />
      </n-layout-sider>
      <n-flex vertical style="width: 100%; gap: normal">
        <n-layout-header>
          <div class="page-top">
            <n-page-header @back="router.go(-1)" :title="route.meta.title">
              <template #subtitle v-if="route.meta.title === '今日天气'">
                <n-flex>
                  <div>🌞</div>
                  <div>31℃</div>
                </n-flex>
              </template>
            </n-page-header>
            <h3 style="font-size: 18px; font-weight: 500">{{ msg }}</h3>
          </div>
        </n-layout-header>
        <n-layout-content
          style="
            height: calc(100vh - 61px);
            padding: 20px;
            background-color: #efefef;
          "
        >
          <div class="page">
            <router-view></router-view>
          </div>
        </n-layout-content>
      </n-flex>
    </n-layout>
  </n-layout>
</template>

<script setup>
import {
  NMenu,
  NLayout,
  NLayoutContent,
  NLayoutSider,
  NIcon,
  NLayoutHeader,
  NFlex,
  NPageHeader,
} from 'naive-ui';
import { useRouter, useRoute } from 'vue-router';
import { h, ref, watch, onMounted } from 'vue';
import { ApiGetTime, ApiOneDayEnglish } from '@/common/api/index.js';
import {
  RocketOutline,
  BookOutline,
  PaperPlaneOutline,
  PartlySunnyOutline,
} from '@vicons/ionicons5';

const route = useRoute();
const router = useRouter();
const menuKey = ref(route.name);
const renderIcon = (icon) => {
  return () => h(NIcon, { component: icon }, null);
};

const msg = ref(null);
const menuOptions = [
  {
    label: 'TEST',
    key: 'test',
    icon: renderIcon(RocketOutline),
  },
  {
    label: '物流查询',
    key: 'express-check',
    icon: renderIcon(RocketOutline),
  },
  {
    label: '新华字典',
    key: 'dict',
    icon: renderIcon(BookOutline),
  },
  {
    label: '那年今日',
    key: 'toDay',
    icon: renderIcon(PaperPlaneOutline),
  },
  {
    label: 'AI抠图',
    key: 'handle-image-ai',
    icon: renderIcon(PaperPlaneOutline),
  },
  {
    label: '今日天气',
    key: 'toDayTq',
    icon: renderIcon(PartlySunnyOutline),
  },
  {
    label: '今日天气',
    key: 'search-qq-info',
    icon: renderIcon(PartlySunnyOutline),
  },
];

const collapsed = ref(false);
const logoStyle = ref('0px');

const onMenuChange = (e) => {
  router.push({
    name: e,
  });
};

const changeCollapsed = (type) => {
  collapsed.value = type;
  logoStyle.value = (type && '0px') || '0px';
};

watch(
  route,
  (val) => {
    menuKey.value = val.name;
  },
  {
    immediate: true,
  }
);

onMounted(async () => {
  let res = await ApiOneDayEnglish();
  let result = await ApiGetTime();
  msg.value ||= res.result.note;
});
</script>

<style lang="scss" scoped>
.logo {
  overflow: hidden;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  //border-bottom: 1px solid #c3ebff;

  img:nth-child(1) {
    transform: translateX(v-bind(logoStyle));
  }

  h2 {
    font-size: 18px;
  }
}

.page-top {
  height: 60px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px;
  border-bottom: 1px solid #e3e3e3;
}

.page {
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 8px;
}
</style>
